<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="../css/index.css" />
    <script src="../js/index.js"></script>
</head>
<body>
    <div class="base">
        <div id="context">
            <div id="title">
                <div class="left">
                    <div>说明：</div>
                    <div>1、上、下、左、右键控制蛇运动的方向</div>
                    <div>2、空格键控制游戏暂停与运行</div>
                    <div>3、“+”、“-”控制运行速度</div>
                </div>
                <div class="right">
                    分数：<label for="" id="score"></label>
                </div>
            </div>
            <canvas id="canvas" height="500px" width="700px"></canvas><!--定义一个图形-->
        </div>
    </div>
    <div class="model" id="model1">
        <div class="context">
            <img src="../asset/YijCN.jpeg" width="160px"/>
            <div class="jixu">游戏已暂停，按空格键继续</div>
        </div>
    </div>
    <div class="model" id="model2">
        <div class="context">
            <img src="../asset/YijCN.jpeg" width="160px" />
            <button onclick="reLoad()">再来一局</button>
        </div>
    </div>
</body>
</html>